


<script>
    import Bus from "bus";
    import toast from "toast";
    export default {

        data() {
            return {
                avatar: require("static/g.jpg"),
                currentPage:"video",
                video:{
                    state:0,
                },
                friend_name:"",
                my_name:""
            };
        },

        methods:{

            change_to_audio(){
                this.currentPage="audio"
            }

        },

        // 在这里监听事件
        sockets: {

            // 连接成功
            connected() {
                console.log("连接成功");
            },

            // 发送消息成功
            MsgSendOK(data) {
                alert(2222222);
                console.log("接收到消息---------->", data);
            }
        },

        created() {

            var query =this.$router.currentRoute.query
            this.my_name =query.my_name
            this.friend_name =query.friend_name

            // 触发 ws 事件
            this.$socket.emit("sendMsg", 666666666888888888888888888);

        }

    };
</script>


<template>

    <div>

        <!-- 单聊视频 -->
        <div class="video-chat" v-show="currentPage=='video'">
            
            <!-- 对方信息 -->
            <div class="friend_info">
                <div class="friend_avatar">
                    <img :src="avatar" alt="">
                </div>
                <div>
                    <div class="friend_name">{{friend_name}}</div>
                    <div class="friend_state">等待对方接受邀请</div>
                </div>
            </div>

            <!-- 自己的影像 -->
            <div class="my-look">
                <div class="my-look-mask"></div>
            </div>

            <!-- 操作 -->
            <div class="video-opt">

                <div class="video-opt-change">

                    <a href="javascript:;" class="opt_item">
                        <div class="opt_icon icon-mute iconfont"></div>
                        <div class="opt_name">静音</div>
                    </a>

                    <a href="javascript:;" class="opt_item"  @click="change_to_audio">
                        <div class="opt_icon icon-go_audio iconfont"></div>
                        <div class="opt_name">切到语音通话</div>
                    </a>
                    
                    <a href="javascript:;" class="opt_item">
                        <div class="opt_icon icon-camera iconfont"></div>
                        <div class="opt_name">切换摄像头</div>
                    </a>

                </div>

                <div class="video-opt-last">

                    <a href="javascript:;" class="opt_item" @click="change_to_audio">
                        <div class="opt_icon icon-go_audio iconfont"></div>
                        <div class="opt_name">切到语音通话</div>
                    </a>

                    <!-- <a href="javascript:;" class="opt_item">
                        <div class="opt_icon icon-hangup iconfont"></div>
                        <div class="opt_name">拒绝</div>
                    </a>
                    
                    <a href="javascript:;" class="opt_item">
                        <div class="opt_icon icon-hangup iconfont"></div>
                        <div class="opt_name">挂断</div>
                    </a> -->

                    <a href="javascript:;" class="opt_item">
                        <div class="opt_icon icon-answer iconfont"></div>
                        <div class="opt_name">接听</div>
                    </a>

                    <a href="javascript:;" class="opt_item">
                        <div class="opt_icon icon-change_camera iconfont"></div>
                        <div class="opt_name">切换摄像头</div>
                    </a>

                </div>
            </div>


        </div>

        <!-- 单聊语音 -->
        <div class="audio-chat"  v-show="currentPage=='audio'">

            <div class="friend_info">

                <div class="friend_avatar">
                    <img :src="avatar" alt="">
                </div>
                <div class="friend_name">{{friend_name}}</div>
                <div class="friend_state">
                    等待对方接受邀请
                </div>
            </div>
            

            <!-- 操作 -->
            <div class="video-opt">

                <!-- 时间 -->
                <div class="audio-time">
                    00:09
                </div>

                <div class="video-opt-last">

                    <a href="javascript:;" class="opt_item border_opt">
                        <div class="opt_icon icon-mute iconfont"></div>
                        <div class="opt_name">静音</div>
                    </a>

                    <!-- <a href="javascript:;" class="opt_item">
                        <div class="opt_icon icon-hangup iconfont"></div>
                        <div class="opt_name">拒绝</div>
                    </a> -->
                    
                    <a href="javascript:;" class="opt_item">
                        <div class="opt_icon icon-hangup iconfont"></div>
                        <div class="opt_name">挂断</div>
                    </a>

                    <!-- <a href="javascript:;" class="opt_item">
                        <div class="opt_icon icon-answer iconfont"></div>
                        <div class="opt_name">接听</div>
                    </a>
                     -->
                    <a href="javascript:;" class="opt_item border_opt">
                        <div class="opt_icon icon-hand_free iconfont"></div>
                        <div class="opt_name">免提</div>
                    </a>

                </div>
            </div>

        </div>
        
    </div>
</template>

<style lang="stylus">

.video-chat {
    .friend_info {
        display: flex;
        position: fixed;
        top: 0;
        width: 100%;
        color: #ffffff;
        z-index: 2;
        padding: 20px;
    }

    .friend_avatar {
        height: 70px;
        width: 70px;
        border-radius: 5px;
        margin-right: 20px;

        img {
            width: 100%;
            height: 100%;
            display: block;
        }
    }

    .friend_name {
        font-size: 32px;
        margin-bottom: 6px;
    }
}

.my-look {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.my-look-mask {
    background-color: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
}

.video-opt {
    position: fixed;
    bottom: 20px;
    width: 100%;
}

.video-opt-last, .video-opt-change {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.video-opt-change {
    margin-bottom: 30px;
}

.video-opt-change .opt_item {
    width: 100%;

    .iconfont {
        border: none;
        font-size: 38px;

        &.active {
            background-color: #ffffff;
            color: #444;
        }
    }
}

// 语音聊天
.audio-chat {
    position fixed
    top 0
    bottom 0
    right 0
    left 0
    background-color #27282D
    color #fff
    padding-top 100px

    .friend_info{
        display flex
        justify-content center 
        align-items center
        flex-flow column
        text-align center
    }
    .friend_avatar {
        height: 120px;
        width: 120px;
    }

    .friend_name{
        font-size 36px
        margin 10px auto 
    }
}

.audio-time{
    text-align center
    margin-bottom 50px
    font-size 20px
}

// 按钮
.opt_item {
    width: 33.3%;
    color: #ffffff;
    text-align: center;
    
    &.border_opt{

        .iconfont{
            border 1px solid #fff 
            font-size 28px

            &.active{
                background-color: #ffffff;
                color: #444;
            }
        }
    }
}

.opt_name {
    letter-spacing: 3px;
    font-size: 13px;

}

.opt_icon {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 42px;
    margin: 0 auto;
    margin-bottom: 10px;

    &.icon-hangup {
        background-color: #DA4A4C;
    }

    &.icon-answer {
        background-color: #0BB908;
        font-size: 34px;
    }

    &.icon-change_camera, &.icon-go_audio {
        color: #fff;
        border: 1.5px solid #ffffff;
    }

    &.icon-change_camera {
        font-size: 23px;
    }

    &.icon-go_audio {
        font-size: 34px;
    }
}
</style>


